import React from "react";
import { BrowserRouter, Outlet, Route, Routes, Link } from "react-router-dom";

function Home() {
  return <div>this is home</div>;
}

function About() {
  return <div>this is about</div>;
}

function Layout() {
  return (
    <div>
      <Link to="/">首页</Link>
      <Link to="/about">关于</Link>
      <Outlet />
    </div>
  );
}

/**
 * 嵌套路由使用步奏：
 * 1. 在App.jsx 中定义路由的嵌套结构。
 * 2. 在一级路由中，指定我们自定义的布局组件 <Route element={<Layout/>} />
 * 3. 在Layout 组件中，使用路由出口组件 <Outlet/>
 * 4. 将<Link></Link> 放到我们需要的位置，实现路由跳转。
 */
function App() {
  return (
    <div>
      App
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route index element={<Home />} />
            <Route path="about" element={<About />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;
